<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 标题：组件 A 向总线上报事件 -->
			<h2>组件A：向总线上报事件</h2>
			<!-- 挂载组件 A，并传递 total 值 -->
			<my-component-a v-bind:counter="total"></my-component-a>
			<!-- 标题：组件 B 通过总线监听相关事件 -->
			<h2>组件B：通过总线监听相关事件</h2>
			<!-- 挂载组件 B -->
			<my-component-b></my-component-b>
		</div>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script>
			var bus = new Vue(); // 创建一个 Vue 实例作为事件总线

			Vue.component('my-component-a', {
				template: '<div><p>组件A</p><hr><button v-on:click="doClick">{{ counter }}</button><hr></div>',
				// 组件 A 的模板
				data: function() {
					return {
						counter: 1 // 初始化组件 A 的计数器为 1
					}
				},
				methods: {
					doClick: function() {
						// 点击按钮时的处理函数
						this.counter++; // 计数器加 1
						//'btn-click' 只是一个自定义的字符串标识，用于标识和区分不同的事件。
						//在触发事件时使用这个名称，在监听事件时也使用相同的名称来匹配和处理相应的事件。
						//通过事件总线 bus 来传递事件和数据，使得 my-component-a 不需要直接了解或操作其他组件（如 my-component-b）的内部状态，
						//而是通过发布事件的方式通知其他组件可能感兴趣的状态变化。
						// 其他组件（如 my-component-b）可以选择监听这个事件，并在事件被触发时做出相应的响应和处理，
						//从而实现了组件之间的灵活交互，提高了代码的可维护性和可扩展性。
						bus.$emit('btn-click', this.counter) // 向事件总线触发 'btn-click' 事件并传递计数器的值
					}
				}
			})

			Vue.component('my-component-b', {
				template: '<div><p>组件B</p><hr>计数器：{{ counter }} <hr></div>',
				// 组件 B 的模板
				data: function() {
					return {
						counter: 0 // 初始化组件 B 的计数器为 0
					}
				},
				methods: {
					// foo: function(value) {
					// 	// 处理从事件总线接收到的值的函数
					// 	console.log(value); // 打印接收到的值
					// 	this.counter = value; // 更新组件 B 的计数器
					// }
					foo:function(value){
						this.counter =value;
					}
				},
				created: function() {
					// 在组件创建时，监听事件总线的 'btn-click' 事件
					bus.$on('btn-click', this.foo);
				}
			})

			var app = new Vue({
				el: '#app', // 将 Vue 实例挂载到具有 ID "app" 的元素上
				data: {
					total: 0 // 初始化总计数器为 0
				},
				methods: {
					doChildClick: function() {
						this.total += 1 // 处理子组件点击的方法，总计数器加 1
					}
				}
			})
		</script>

	</body>
</html>